<template>
	<view class="me-container">
		<!-- 用户信息头部 -->
		<view class="user-header">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill" @click="changeAvatar"></image>
				<view class="user-details">
					<text class="username">{{ userInfo.nickname || '未登录' }}</text>
					<text class="user-level">{{ userInfo.level || 'VIP会员' }}</text>
				</view>
			</view>
			<view class="user-stats">
				<view class="stat-item">
					<text class="stat-number">{{ userInfo.points || 0 }}</text>
					<text class="stat-label">积分</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ userInfo.coupons || 0 }}</text>
					<text class="stat-label">优惠券</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ userInfo.balance || 0 }}</text>
					<text class="stat-label">余额</text>
				</view>
			</view>
		</view>

		<!-- 订单管理 -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<text class="view-all" @click="goToOrders">查看全部 ></text>
			</view>
			<view class="order-tabs">
				<view class="order-tab" @click="goToOrders('pending')">
					<image class="tab-icon" src="/static/icons/pending.png"></image>
					<text class="tab-text">待付款</text>
					<view class="badge" v-if="orderCounts.pending > 0">{{ orderCounts.pending }}</view>
				</view>
				<view class="order-tab" @click="goToOrders('shipped')">
					<image class="tab-icon" src="/static/icons/shipped.png"></image>
					<text class="tab-text">待发货</text>
					<view class="badge" v-if="orderCounts.shipped > 0">{{ orderCounts.shipped }}</view>
				</view>
				<view class="order-tab" @click="goToOrders('delivering')">
					<image class="tab-icon" src="/static/icons/delivering.png"></image>
					<text class="tab-text">待收货</text>
					<view class="badge" v-if="orderCounts.delivering > 0">{{ orderCounts.delivering }}</view>
				</view>
				<view class="order-tab" @click="goToOrders('completed')">
					<image class="tab-icon" src="/static/icons/completed.png"></image>
					<text class="tab-text">已完成</text>
				</view>
				<view class="order-tab" @click="goToOrders('refund')">
					<image class="tab-icon" src="/static/icons/refund.png"></image>
					<text class="tab-text">退款/售后</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="goToPage('/pages/address/address')">
					<image class="menu-icon" src="/static/icons/address.png"></image>
					<text class="menu-text">收货地址</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToPage('/pages/favorites/favorites')">
					<image class="menu-icon" src="/static/icons/favorites.png"></image>
					<text class="menu-text">我的收藏</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToPage('/pages/history/history')">
					<image class="menu-icon" src="/static/icons/history.png"></image>
					<text class="menu-text">浏览历史</text>
					<text class="menu-arrow">></text>
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @click="goToPage('/pages/coupons/coupons')">
					<image class="menu-icon" src="/static/icons/coupon.png"></image>
					<text class="menu-text">优惠券</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToPage('/pages/points/points')">
					<image class="menu-icon" src="/static/icons/points.png"></image>
					<text class="menu-text">积分商城</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToPage('/pages/wallet/wallet')">
					<image class="menu-icon" src="/static/icons/wallet.png"></image>
					<text class="menu-text">我的钱包</text>
					<text class="menu-arrow">></text>
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @click="goToPage('/pages/customer-service/customer-service')">
					<image class="menu-icon" src="/static/icons/service.png"></image>
					<text class="menu-text">客服中心</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToPage('/pages/settings/settings')">
					<image class="menu-icon" src="/static/icons/settings.png"></image>
					<text class="menu-text">设置</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="goToPage('/pages/about/about')">
					<image class="menu-icon" src="/static/icons/about.png"></image>
					<text class="menu-text">关于我们</text>
					<text class="menu-arrow">></text>
				</view>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-section" v-if="userInfo.isLogin">
			<button class="logout-btn" @click="logout">退出登录</button>
		</view>
		
		<!-- 登录按钮 -->
		<view class="login-section" v-else>
			<button class="login-btn" @click="goToLogin">立即登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 用户信息
const userInfo = reactive({
	avatar: '/static/images/default-avatar.png',
	nickname: '用户昵称',
	level: 'VIP会员',
	points: 1280,
	coupons: 5,
	balance: 299.80,
	isLogin: true
})

// 订单数量统计
const orderCounts = reactive({
	pending: 2,
	shipped: 1,
	delivering: 0,
	completed: 15,
	refund: 0
})

// 页面跳转
const goToPage = (url) => {
	uni.navigateTo({
		url: url
	})
}

// 跳转到订单页面
const goToOrders = (type = 'all') => {
	uni.navigateTo({
		url: `/pages/orders/orders?type=${type}`
	})
}

// 跳转到登录页面
const goToLogin = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	})
}

// 更换头像
const changeAvatar = () => {
	uni.showActionSheet({
		itemList: ['从相册选择', '拍照'],
		success: (res) => {
			if (res.tapIndex === 0) {
				// 从相册选择
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						// 这里可以上传到服务器，然后更新头像
						userInfo.avatar = tempFilePath
						uni.showToast({
							title: '头像更新成功',
							icon: 'success'
						})
					}
				})
			} else if (res.tapIndex === 1) {
				// 拍照
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						// 这里可以上传到服务器，然后更新头像
						userInfo.avatar = tempFilePath
						uni.showToast({
							title: '头像更新成功',
							icon: 'success'
						})
					}
				})
			}
		}
	})
}

// 退出登录
const logout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				// 清除用户信息
				userInfo.isLogin = false
				userInfo.nickname = '未登录'
				userInfo.points = 0
				userInfo.coupons = 0
				userInfo.balance = 0
				
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
			}
		}
	})
}

// 页面加载时获取用户信息
onMounted(() => {
	// 这里可以调用API获取用户信息
	console.log('个人中心页面加载完成')
})
</script>

<style scoped>
.me-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 用户信息头部 */
.user-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx 30rpx 30rpx;
	color: white;
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 30rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
	flex: 1;
}

.username {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.user-level {
	font-size: 24rpx;
	opacity: 0.8;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	display: inline-block;
}

.user-stats {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-number {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	opacity: 0.8;
}

/* 订单管理 */
.order-section {
	background-color: white;
	margin: 20rpx 0;
	padding: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.view-all {
	font-size: 28rpx;
	color: #999;
}

.order-tabs {
	display: flex;
	justify-content: space-between;
}

.order-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	flex: 1;
}

.tab-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 16rpx;
}

.tab-text {
	font-size: 24rpx;
	color: #666;
}

.badge {
	position: absolute;
	top: -10rpx;
	right: 20rpx;
	background-color: #ff4757;
	color: white;
	font-size: 20rpx;
	padding: 4rpx 8rpx;
	border-radius: 20rpx;
	min-width: 32rpx;
	text-align: center;
}

/* 功能菜单 */
.menu-section {
	padding: 0 30rpx;
}

.menu-group {
	background-color: white;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 24rpx;
}

.menu-text {
	flex: 1;
	font-size: 30rpx;
	color: #333;
}

.menu-arrow {
	font-size: 28rpx;
	color: #ccc;
}

/* 登录/退出按钮 */
.logout-section,
.login-section {
	padding: 40rpx 30rpx;
}

.logout-btn,
.login-btn {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	border: none;
}

.logout-btn {
	background-color: #ff4757;
	color: white;
}

.login-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

.logout-btn:active,
.login-btn:active {
	opacity: 0.8;
}
</style>